<template>
  <div class="recharge_page">
    <CommonHeader title="充值" />
    <div class="recharge_content page_no_tab_bar font_color">
      <!-- 充值二维码 -->
      <div class="qrcode">
        <img :src="qrcodeUrl" alt="" />
      </div>
      <!-- 充值内容 -->
      <ul class="recharge_info">
        <!-- 币种 -->
        <li @click="selectCurrency">
          <div class="left">
            <div class="add_text">币种</div>
            <div>{{ curCoinInfo.name }}</div>
          </div>
          <div class="right">
            <img src="@/assets/assets/exchange_icon.png" alt="" />
          </div>
        </li>
        <!-- 主网 -->
        <li>
          <div class="left">
            <div class="add_text">主网</div>
            <div>{{ curCoinNet.symbol }}-{{ curCoinNet.primaryNet }}</div>
          </div>
          <div class="right" @click="selectNetwork">
            <img src="@/assets/assets/exchange_icon.png" alt="" />
          </div>
        </li>
        <!-- 钱包地址 -->
        <li>
          <div class="left">
            <div class="add_text">钱包地址</div>
            <div class="address">
              <div>{{ assetsAddr }}</div>
            </div>
          </div>
          <div class="right" @click="copyContent(assetsAddr)">
            <img src="@/assets/profile/copy_icon.png" alt="" />
          </div>
        </li>
        <!-- 选择上账地址 -->
        <li>
          <div class="left">
            <div class="add_text">选择上账地址</div>
            <div>
              <div>现货账户</div>
            </div>
          </div>
          <div class="right"></div>
        </li>
      </ul>
      <!-- 保存按钮 -->
      <!-- <div class="operate_btn">保存并分享地址</div> -->
    </div>
    <!-- 选择币种 -->
    <SelectCurrency
      ref="selectCurrencyRef"
      @choose="changeCoinInfo"
      :coins="coinTypeList"
    />
    <!-- 选择网络 -->
    <SelectNetwork
      ref="selectNetworkRef"
      :coins="rechageCoinsList"
      @choose="changeCoinNet"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import SelectNetwork from "./components/SelectNetwork.vue";
import { ElMessage } from "element-plus";
import SelectCurrency from "./components/SelectCurrency.vue";
import { getAddress, getRechageCoin, getWithdrawCoinList } from "@/api/assets";
import QRCode from "qrcode";

// 定义 ref
const selectCurrencyRef = ref();
const selectNetworkRef = ref();

// 币种列表
const coinTypeList = ref();
// 主网络
const rechageCoinsList = ref();
// 当前币种
const curCoinInfo: any = ref({
  name: "",
});
// 当前网络
const curCoinNet: any = ref({
  mainCoinType: "",
});
// 钱包地址
const assetsAddr: any = ref();
// 二维码url
const qrcodeUrl = ref("");

// 选择币种
const selectCurrency = () => {
  selectCurrencyRef.value.showDrawer(10);
};

// 修改币种
const changeCoinInfo = (row: any) => {
  curCoinInfo.value = row;
};

// 修改币种
const changeCoinNet = (row: any) => {
  curCoinNet.value = row;
};

// 选择网络
const selectNetwork = () => {
  selectNetworkRef.value.showDrawer(10);
};

// 复制输入框内容
const copyContent = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功！");
  } catch (err) {
    ElMessage.error("复制失败！");
  }
};

// 根据地址生成二维码
const getQrcode = (addr: string) => {
  QRCode.toDataURL(addr)
    .then((url: any) => {
      qrcodeUrl.value = url;
    })
    .catch((err: any) => {
      ElMessage.error(err);
    });
};

// 获取数据
const getData = async () => {
  let res = await getWithdrawCoinList();
  coinTypeList.value = res.data;
  curCoinInfo.value = res.data[0];

  let res2 = await getRechageCoin(curCoinInfo.value.name);
  rechageCoinsList.value = res2.data;
  curCoinNet.value = res2.data[0];

  let res3 = await getAddress(curCoinNet.value.mainCoinType);
  assetsAddr.value = res3.data;
  getQrcode(res3.data);
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.recharge_page {
  .recharge_content {
    padding-top: 10px;
    .qrcode {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .recharge_info {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        & > .left {
          flex: 1;
          & > div:first-child {
            margin-bottom: 10px;
          }
        }
        & > .right {
          width: 24px;
          height: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .operate_btn {
      color: #ffffff;
    }
  }
}
</style>
